<template>
  <el-table v-loading="loading" :data="productList" border style="width: 100%">
    <el-table-column type="index" width="50" label="序号" />
    <el-table-column prop="category" label="产品分类" />
    <el-table-column prop="brand" label="产品品牌" />
    <el-table-column prop="proname" label="产品名称" />
    <el-table-column label="产品图片">
      <template #default="scope">
        <img :src="scope.row.img1" alt="" style="width: 100px; height: 100px" />
      </template>
    </el-table-column>
    <el-table-column prop="originprice" label="产品价格" />
    <el-table-column prop="discount" label="产品折扣" />
    <el-table-column prop="sales" label="产品销量" />
    <el-table-column prop="stock" label="产品库存" />
    <el-table-column label="是否上架">
      <template #default="scope">
        <el-switch v-model="scope.row.issale" />
      </template>
    </el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐">
      <template #default="scope">
        <el-switch v-model="scope.row.isrecommend" />
      </template>
    </el-table-column>
    <el-table-column prop="isseckill" label="是否秒杀">
      <template #default="scope">
        <el-switch v-model="scope.row.isseckill" />
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" />
  </el-table>
  <el-pagination
    v-model:current-page="count"
    v-model:page-size="limitNum"
    :page-sizes="[10, 20, 30, 40]"
    :background="true"
    layout="prev, pager, next, total, sizes, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script>
import { getProductList } from "@/api/api";
export default {
  data() {
    return {
      productList: [],
      count: 1,
      limitNum: 10,
      total: 0,
      loading: false,
    };
  },
  created() {
    this.initPageData();
  },
  methods: {
    async initPageData() {
      this.loading = true;
      const parmas = {
        count: this.count,
        limitNum: this.limitNum,
      };
      const res = await getProductList(parmas);
      this.productList = res.data;
      this.total = res.total;
      this.loading = false;
    },
    handleSizeChange(val) {
      this.limitNum = val;
      this.initPageData();
    },
    handleCurrentChange(val) {
      this.count = val;
      this.initPageData();
    },
  },
};
</script>

<style></style>
